#cases{
  .mk1{
    width: 100%;
    height: 628px;
    -o-object-fit: cover;
    object-fit: cover;
    img{
      display: block;
      width: 100%;
      height: 628px;
      -o-object-fit: cover;
      object-fit: cover;
    }
  }
  .mk2{
    width: 100%;
    ul{
      width: 100%;
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: center;
      gap: 30px;
      li{
        line-height: 40px;
        margin: 60px 90px 38px;
        display: inline-block;
        vertical-align: middle;
        font-weight: bolder;
        cursor: pointer;
        position: relative;
        a{
          text-decoration: none;
          color: #9c7807;
          font-size: 16px;
        }
      }
      li.on a{
        color: #141414;
      }
      li.on a::after{
        content: '';
        display: block;
        width: 30px;
        height:2px;
        background: #000;
        position: absolute;
        bottom:0;
        left:50%;
        margin-left: -15px;
      }
    }
  }
  .swiper1{
    width: 1200px;
    margin: 0 auto;
    padding-bottom: 40px;
    box-sizing: border-box;
    ul{
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: space-between;
      flex-wrap: wrap;
      li{
        position: relative;
        display: block;
        width: 380px;
        height: 230px;
        cursor: pointer;
        margin-bottom: 30px;
        a{
          display: block;
          width: 100%;
          height: 100%;
          position: relative;
          overflow: hidden;
          img{
            display: block;
            width: 100%;
            height:100%;
          }
          .box{
            position: absolute;
            top:0;
            left:0;
            width: 100%;
            height:100%;
            background: rgba(0,0,0,0);
            transition: all 0.5s;
            .txt{
              padding: 20px;
              box-sizing: border-box;
              display: flex;
              flex-direction: column;
              align-items: center;
              justify-content: center;
              height: 100%;
              color:#fff;
              position: relative;
              top:200px;
              opacity: 0.1;
              transition: all 0.5s;
              .title{
                font-weight: bold;
                font-size: 24px;
                padding-bottom: 20px;
                box-sizing: border-box;
                position: relative;
                margin-bottom: 20px;
              }
              .title:after{
                content: '';
                display: block;
                position: absolute;
                bottom:0;
                width:30px;
                height:2px;
                left:50%;
                margin-left: -15px;
                background: #F3D627;
              }
              .miaosu{
                padding: 0 30px;
                box-sizing: border-box;
                font-size: 14px;
                letter-spacing: 2px;
                line-height: 25px;
                display: -webkit-box;
                -webkit-line-clamp: 3; /* 指定显示的行数 */
                -webkit-box-orient: vertical;
                overflow: hidden;
                text-overflow: ellipsis;
              }
            }
            .xian{
              position: absolute;
              top:20px;
              left:20px;
              width:340px;
              height:190px;
              border: 1px solid #ffc306;
              transition:all 0.5s ;
              opacity: 0;
            }
            .xian1{
              width: 0px;
              height:0;
            }
            .xian2{
              top:initial;
              left:initial;
              right:18px;
              bottom:18px;
              width: 0px;
              height:0;
            }
          }
        }
      }
      li:hover{
        a{
          .box{
            background: rgba(0,0,0,0.7);
            .txt{
              top:0;
              opacity: 1;
            }
            .xian{
              width:340px;
              height:190px;
              opacity: 1;
            }
          }
        }
      }
    }
    .allbtn{
      display: block;
      width: 228px;
      line-height: 52px;
      border: 1px solid #ffc306;
      text-align: center;
      font-size: 16px;
      color: #ffc306;
      margin: 0 auto;
      cursor: pointer;
      text-decoration: none;
    }
  }
}
